<template>
  <view class="about-container">
    <view class="about-content">
      <!-- Logo -->
      <image class="logo" src="/static/images/logo.png" mode="aspectFit"></image>
      
      <!-- 应用信息 -->
      <view class="app-info">
        <text class="app-name">智慧医疗预约平台</text>
        <text class="version">Version 1.0.0</text>
      </view>
      
      <!-- 功能介绍 -->
      <view class="feature-list">
        <view class="feature-item">
          
          <text class="feature-text">便捷预约</text>
        </view>
        <view class="feature-item">
        
          <text class="feature-text">专业医生</text>
        </view>
        <view class="feature-item">
          
          <text class="feature-text">贴心服务</text>
        </view>
      </view>
      
      <!-- 联系方式 -->
      <view class="contact-info">
        <view class="contact-item">
          <text class="label">客服电话：</text>
          <text class="value">400-888-8888</text>
        </view>
        <view class="contact-item">
          <text class="label">服务时间：</text>
          <text class="value">周一至周日 8:00-22:00</text>
        </view>
        <view class="contact-item">
          <text class="label">联系邮箱：</text>
          <text class="value">support@medical.com</text>
        </view>
      </view>
      
      <!-- 版权信息 -->
      <view class="copyright">
        <text>Copyright © 2024 智慧医疗</text>
        <text>All Rights Reserved</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style lang="scss">
.about-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f6f7f9 0%, #ffffff 100%);
  padding: 40rpx;

  .about-content {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 30rpx;
    padding: 40rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
    
    .logo {
      width: 200rpx;
      height: 200rpx;
      display: block;
      margin: 0 auto 40rpx;
    }
    
    .app-info {
      text-align: center;
      margin-bottom: 60rpx;
      
      .app-name {
        display: block;
        font-size: 40rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 16rpx;
      }
      
      .version {
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .feature-list {
      display: flex;
      justify-content: space-around;
      margin-bottom: 60rpx;
      
      .feature-item {
        text-align: center;
        
        .iconfont {
          font-size: 60rpx;
          color: #007AFF;
          margin-bottom: 16rpx;
          display: block;
        }
        
        .feature-text {
          font-size: 28rpx;
          color: #333;
        }
      }
    }
    
    .contact-info {
      background: #f8f9fa;
      border-radius: 20rpx;
      padding: 30rpx;
      margin-bottom: 60rpx;
      
      .contact-item {
        display: flex;
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .label {
          color: #666;
          font-size: 28rpx;
          width: 160rpx;
        }
        
        .value {
          color: #333;
          font-size: 28rpx;
          flex: 1;
        }
      }
    }
    
    .copyright {
      text-align: center;
      
      text {
        display: block;
        font-size: 24rpx;
        color: #999;
        line-height: 1.8;
      }
    }
  }
}
</style> 